<!--
 * @Author: your name
 * @Date: 2020-05-11 17:37:55
 * @LastEditTime: 2020-06-11 17:22:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\components\kmlc-com\kmlc-form-treeSelect\kmlc-form-treeSelect.vue
 -->
<template>
  <view>
    <tui-list-cell  :class="[type]" :arrow="readonly_?false:true">
      <view class="tui-line-cell" @click="showTreeBlock">
        <view class="tui-title">
          <text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
          <text>{{label}}</text>
        </view>
        <view class="tui-right">
          <view class="product" v-if="type=='single'||!selectData.length">{{selectData&&selectData[0]&&selectData[0][defaultProps_.label]||'请选择'}}</view>

        </view>
      </view>
    </tui-list-cell>
    <tui-grid :class="[type]" v-if="type!='single'">
			<block v-for="(item,index) in selectData" :key="index">
				<tui-grid-item :cell="5" v-if="defaultProps_.showType&&item.type==defaultProps_.showType" @click="removeItem(item)">
					<view class="tui-grid-icon" v-if="item[defaultProps_.icon] ||item.type=='depart'||item.type=='user'">
						<image v-if="item[defaultProps_.icon]&&typeof item[defaultProps_.icon] == 'string'&&item[defaultProps_.icon].indexOf('/') !== -1"  :src="item[defaultProps_.icon]" ></image>
            <uni-icons v-else-if="item.type=='depart'" type="home" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
            <uni-icons v-else-if="item.type=='user'" type="contact" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
            <uni-icons v-else type="checkbox" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
					</view>
					<text class="tui-grid-label">{{item[defaultProps_.label]}}</text>
				</tui-grid-item>
        <tui-grid-item :cell="5" v-if="!defaultProps_.showType" @click="removeItem(item)">
					<view class="tui-grid-icon" v-if="item[defaultProps_.icon] ||item.type=='depart'||item.type=='user'">
						<image v-if="item[defaultProps_.icon]&&typeof item[defaultProps_.icon] == 'string'&&item[defaultProps_.icon].indexOf('/') !== -1"  :src="item[defaultProps_.icon]" ></image>
            <uni-icons v-else-if="item.type=='depart'" type="home" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
            <uni-icons v-else-if="item.type=='user'" type="contact" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
            <uni-icons v-else type="checkbox" color="#007aff" size="24" style="margin-right:5px"></uni-icons>
					</view>
					<text class="tui-grid-label">{{item[defaultProps_.label]}}</text>
				</tui-grid-item>
			</block>
		</tui-grid>
    <view v-show="treeBlockIsShow" class="tree-block">
      <div class="treebox">
        <ly-tree
          :tree-data="treeData"
          :ready="ready"
          :props="defaultProps_"
          ref="tree"
          node-key="id"
          :show-radio="type=='single'?true:false"
          :show-checkbox="type=='multiple'?true:false"
          checkOnClickNode
          showNodeIcon
          :default-expanded-keys="defaultSelectKeys.parentKeys"
          :default-checked-keys="defaultSelectKeys.keys"
          
        ></ly-tree>
      </div>
      <div class="btn">
        <button
          @click="showTreeBlock"
          class="tui-btn tui-btn-mini tui-white marR4"
          hover-class="tui-white-hover"
        >取消</button>

        <tui-button @click="showTreeBlock(true)" type="primary" size="mini" class="tui-mbtm">确定</tui-button>
      </div>
    </view>
  </view>
</template>

<script>
import LyTree from "@/components/other-com/ly-tree/ly-tree.vue";
import { queryAddressBook } from "@/pages/addressBook/interface.js";
export default {
  components: {
    LyTree
  },
  name: "treeSelect",
  props: {
    label: {
      type: String
    },
    emData: {
      type: Object,
      default: ()=>{return {}}
    },
    readonly:{
      type:Boolean,
      default:false
    },
    options:{
      type:Object,
      default:()=>{return {}}
    },
    rules:{
      type:Array,
      default:()=>{return []}
    },
    model:{
      type:String,
    },
    keyStr:{
      type:String,
    }
  },
  data() {
    return {
      treeBlockIsShow: false,
      ready: false,
      type: "single",
      defaultSelectKeys:{
        keys:[],
        parentKeys:[]
      },
      selectData: [],
      treeData: [],
      defaultProps_: {
        children: "children",
        label: "label",
        icon: "avatar"
      },
      readonly_:false,
      
    };
  },
  watch:{
    'emData.options.defaultValue':function(val){
      console.log('watch data:',val);
      this.selectData =val||[];
      this.initCheckData(true);
    },
    emData(val){
      this.initemData(this.initCheckData);
    }
  },
  created(){
    
    this.initemData(this.initCheckData);
  },
  mounted() {
    this.ready = true;
  },
  methods: {
    initemData(callback){
      if(this.emData && this.emData.key){
        this.treeData = this.emData.options&&this.emData.options.options||[];
        this.selectData = this.emData.options &&this.emData.options.defaultValue||[];
        this.rules_ = this.emData.rules;
        this.type = this.emData.options.multiple?'multiple':'single';
        this.defaultProps_ = this.emData.options.defaultProps;
      }else{
        this.treeData = this.options&&this.options.options||[];
        this.selectData = this.options &&this.options.defaultValue;
        this.rules_ = this.rules;
        this.type = this.options.multiple?'multiple':'single';
        this.defaultProps_ = this.options.defaultProps;
      }
      callback&&callback();
    },
    initCheckData(isReloadCheck){
      this.defaultSelectKeys ={
          keys:[],
          parentKeys:[],
          childrenKeys:[],
        };
      if(this.selectData && Array.isArray(this.selectData) && this.selectData.length){
        this.selectData.map(item=>{
          this.defaultSelectKeys.keys.push(item.id);
            if(item.children){
              this.defaultSelectKeys.parentKeys.push(item.id);
            }else{
              this.defaultSelectKeys.childrenKeys.push(item.id);
            }
        })
      }
     
      
    },
    showTreeBlock(isOk) {
      this.treeBlockIsShow = !this.treeBlockIsShow;
      if(this.treeBlockIsShow){
        let keys = []
        console.log('showTreeBlock:',this.defaultSelectKeys.keys);
        this.type=='single'?keys=this.defaultSelectKeys.keys:keys=this.defaultSelectKeys.childrenKeys
        this.$refs.tree.setCheckedKeys([]);
        this.$refs.tree.setCheckedKeys(keys);
      }
      if(isOk&& typeof isOk =='boolean'){
        console.log('isOk:',isOk);
        this.getCheckedKeys();
      }
    },
    getCheckedKeys() {
      let data =  this.$refs.tree.getCheckedNodes();
      if(Array.isArray(data)&& data.length>0){
          this.selectData = data||[];
          console.log('Val:',data);
          this.$emit('onChangeVal',data);
      }else{
          uni.showToast({
              icon:'none',
              title:'还未选择！'
          })
      }       
    },
    removeItem(data){
      this.selectData.map((item,index)=>{
        if(item.id == data.id){
          this.selectData.splice(index,1);
        }
      })
      this.$emit('onChangeVal',this.selectData);
    },
    
  },
  modal:{
    prop: 'selectData',
    event: 'onChangeVal'
  }
};
</script>


<style lang="scss">
.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  min-width: 100upx;
  line-height: 32rpx;
  flex-shrink: 0;
}

.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}
.pad10 {
  padding: 10px;
}
.tui-box {
  flex: 1;
}
.product {
  padding-left: 10px;
  font-size: 30rpx;
  line-height: 32rpx;
  flex: 1;
}
.tree-block {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  padding-bottom: 90upx;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 99;

  .btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90upx;
    padding-top: 13upx;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    z-index: 2;
  }
}
.marR4 {
  margin-right: 40upx;
}
.tui-list-cell.multiple::after{
        border: none;
    }
 .tui-grids{
        background-color: #fff;
        box-sizing: border-box;
        padding-bottom: 2px;
    }
    .tui-grid::before{
        border: none;
    }
    .tui-grid::after{
         border: none;
        
    }
    
    .tui-grids::after{
         border: none;
    }
    .tui-grids.multiple::before{
         content: " ";
        position: absolute;
        // left: 0;
        left: 14px !important;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #c8c7cc;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    .tui-grids.multiple.left::before{
      left: 14px !important;
    }
     .tui-grids.single::before{
        border: none;
    }
    .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
    }
    .isrequire{ color:#d41200;}
</style>